<template>
  <div class="app-container">
    <div class="header flex">
      <FormSearch
        :formFields="searchList"
        @search="Search"
        @reset="Search"
      ></FormSearch>
    </div>
    <div class="footer">
      <div class="flex justify-end mb-3">
        <a-button type="primary" @click="handleAdd">新增账号</a-button>
      </div>
      <div class="table-inner">
        <a-table
          :columns="columns"
          :data-source="state.data"
          rowKey="store_user_id"
          :pagination="state.pagination"
          @change="pageChange"
          :loading="state.loading"
          :scroll="{ x: 1200 }"
        >
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'actions'">
              <a-space size="small">
                <a-button type="link" @click="handleBindBd(record)">{{
                  record.bd_id !== 0 ? "解除绑定店铺" : "绑定店铺"
                }}</a-button>
                <a-button type="link" @click="handleBindContact(record)">{{
                  record.contact_id !== 0 ? "解除绑定客服" : "绑定客服"
                }}</a-button>
                <a-button type="link" @click="handleEdit(record)"
                  >编辑</a-button
                >
                <a-popconfirm
                  title="你确定要删除吗?"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="confirmDel(record)"
                >
                  <a-button type="link" danger>删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </div>
      <!--  弹出框-->
      <Create ref="createRef" @modal-success="reload" />
      <Edit ref="editRef" @modal-success="reload" />
      <BindBd ref="bindBdRef" @modal-success="reload" />
      <BindContact ref="contactRef" @modal-success="reload" />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import Create from "./components/Create.vue";
import Edit from "./components/Edit.vue";
import BindBd from "./components/BindBd.vue";
import BindContact from "./components/BindContact.vue";
import { list, del, secureBind } from "@/api/admin/storeUser";

//弹出框的ref
const createRef = ref();
const editRef = ref();
const bindBdRef = ref();
const contactRef = ref();

const columns = [
  {
    title: "id",
    dataIndex: "store_user_id",
    width: 100,
  },
  {
    title: "账号",
    dataIndex: "username",
    width: 200,
  },
  {
    title: "姓名",
    dataIndex: "real_name",
    width: 150,
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
    width: 200,
  },
  {
    title: "操作",
    dataIndex: "actions",
    fixed: "right",
    width: 200,
  },
];
//搜索框数据
const searchList = reactive([
  {
    type: "input",
    label: "账号",
    name: "name",
    value: "",
    placeholder: "请输入账号",
  },
  {
    type: "select",
    label: "类型",
    name: "user_type",
    value: 0,
    placeholder: "请选择类型",
    options: [
      { id: 0, name: "全部" },
      { id: 1, name: "客服" },
      { id: 2, name: "bd" },
      { id: 3, name: "客服和bd" },
      { id: 4, name: "非客服和bd" },
    ],
  },
]);

const state = reactive({
  data: [], //表格的数据
  loading: false,
  pagination: {
    total: 0,
    showSizeChanger: true, //是否页码可以改变
    current: 1, //当前xx页面
    pageSize: 10, //一页展示xx条数据
    showTotal: function (total) {
      return "总共" + total + "条数据";
    }, //总共xx条
    showQuickJumper: true,
  }, //分页数据
  searchParams: {
    page: 1,
    limit: 10,
  }, //搜索数据
});
//分页变动数据
function pageChange(pagination) {
  state.pagination.current = pagination.current;
  state.pagination.pageSize = pagination.pageSize;
  //搜索的参数
  state.searchParams.page = pagination.current;
  state.searchParams.limit = pagination.pageSize;
  //搜索
  getList();
}

//获取列表的数据
const getList = () => {
  state.loading = true;
  list({
    ...state.searchParams,
  }).then(function (res) {
    setTimeout(function () {
      state.loading = false;
    }, 500);
    if (res.code == 0) {
      const data = res.data;
      state.data = data.data;
      state.pagination.total = data.total;
    }
  });
};

//添加
const handleAdd = function () {
  createRef.value.show();
};

//编辑
const handleEdit = function (record) {
  editRef.value.show(record);
};

//删除
const confirmDel = function (record) {
  del({ id: record.store_user_id }).then(function (res) {
    if (res.code == 0) {
      message.success(res.msg);
      //重新加载数据
      getList();
    }
  });
};
// 绑定店铺
const handleBindBd = (record) => {
  if (record.bd_id !== 0) {
    // 解除绑定
    secureBind({
      user_id: record.bd.user_id,
      type: 2,
    }).then((res) => {
      if (res.code == 0) {
        message.success(res.msg);
        getList();
      }
    });
  } else {
    bindBdRef.value.show(record);
  }
};
// 绑定客服
const handleBindContact = (record) => {
  if (record.contact_id !== 0) {
    // 解除绑定
    secureBind({
      user_id: record.contact.user_id,
      type: 1,
    }).then((res) => {
      if (res.code == 0) {
        message.success(res.msg);
        getList();
      }
    });
  } else {
    contactRef.value.show(record);
  }
};
//搜索事件
const Search = (values) => {
  state.searchParams.page = 1;
  state.searchParams = {
    ...state.searchParams,
    ...values,
  };
  //搜索
  getList();
};
const reload = () => {
  getList();
};
//获取列表
getList();
</script>

<style scoped lang="scss">
@import "./index";
</style>
